<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>限时秒杀</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			/*最外层大框*/
			
			#box {
				width: 702px;
				height: 378px;
				/* 背景图片*/
				background: url(flash_sale.png);
				/*居中*/
				margin: 0 auto;
				/*父元素设置定位，为了子元素根据它进行相对定位*/
				/*position: absolute;*/
			}
			/* 内部4个小框*/
			
			#box div {
				width: 50px;
				height: 50px;
				border: 1px solid gray;
				/* 显示在同一行，也可以display实现*/
				/*float: left;*/
				display: inline-block;
				/*相对于父元素定位*/
				position: relative;
				top: 260px;
				left: 300px;
				margin-left: 10px;
				/*文字水平垂直居中*/
				text-align: center;
				line-height: 50px;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<div id="day"></div>
			<div id="hour"></div>
			<div id="minute"></div>
			<div id="seconds"></div>
		</div>
		<script>
			/* 1、获取结束时间（转成毫秒）：当前时间的2天后
						   2、定义函数：
						          获取剩余时间：结束时间毫秒数-当前时间毫秒数
						          剩余时间显示在页面4个框
						   3、计时器每隔1秒执行函数*/
			// 当前时间
			var now = new Date();
			// 结束时间的毫秒数:当前时间的毫秒数+2天后的毫秒数
//			var endSeconds = now.getTime() + 24 * 60 * 60 * 2 * 1000;
			// 结束时间：10:38:00
			var endSeconds=new Date('2018-06-05 10:40:00').getTime();
			var day=hour=minute=seconds=0;
			// 定义秒杀函数
			function seckill() {
				var nowtime = new Date();
				// 获取剩余时间(秒数)
				var remain = (endSeconds - nowtime.getTime()) / 1000;
				if(remain > 0) {
					// 把秒转换成：天、小时、分钟、秒
					day = parseInt(remain / (24 * 60 * 60));
					hour = parseInt((remain / (60 * 60)) % 24);
					minute = parseInt((remain / 60) % 60);
					seconds = parseInt(remain % 60);
				}else{
					// 清除计时器
					clearInterval(timer);
					day=hour=minute=seconds=0;
				}
				// 用两位数表示剩余的天、小时、分钟、秒
				day = (day < 10 ? '0' + day : day);
				hour = hour < 10 ? '0' + hour : hour;
				minute = minute < 10 ? '0' + minute : minute;
				seconds = seconds < 10 ? '0' + seconds : seconds;
				// 剩余天、小时、分钟、秒 显示在页面上
				document.getElementById('day').innerHTML = day + '天';
				document.getElementById('hour').innerHTML = hour + '时';
				document.getElementById('minute').innerHTML = minute + '分';
				document.getElementById('seconds').innerHTML = seconds + '秒';
			}
			// 计时器循环执行
			var timer = window.setInterval(seckill, 1000);
		</script>
	</body>

</html>